<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>switch</title>
    <style type="text/css">
      .input-area {
        border: 1px solid blue;
        margin: 15px auto;
        padding: 10px;
      }
      .input-area > input {
        width: 100px;
      }
      .input-area > button {
        width: 100px;
      }
      .result-area {
        display: none;
        border: 1px solid green;
        margin: 15px auto;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="input-area">
      请输入月份
      <input type="text" />
      <button>计算天数</button>
    </div>

    <div class="result-area"></div>

    <script type="text/javascript">
      // 使用 Web API 获取页面上的元素
      // 根据参数指定的选择器选择匹配于该选择器的首个元素
      const input = document.querySelector(".input-area>input");
      console.log(input);
      const button = document.querySelector(".input-area>button");
      console.log(button);
      const ra = document.querySelector( '.result-area' );

      // 使用 对象字面量 定义 监听器实例
      const listener = {
        handleEvent(event) {
          console.log(event);
          // 对于 input 和 textarea 来说可以通过 value 属性来获取用户输入的值
          let month = input.value;
          console.log(month, typeof month);
          // 用字符串表示的数字 乘以 1 即可将字符串转换为数字
          month = month * 1;
          console.log(month, typeof month);
          let day ;
          switch (month) {
            case 2:
              console.log("28天或29天");
              day = '28天或29天' ;
              break;
            case 4:
            case 6:
            case 9:
            case 11:
              console.log("30天");
              day = '30天' ;
              break;
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
              console.log("31天");
              day = '31天'
              break;
            default:
              console.log("月份错误");
              day = '月份错误' ;
          }

          // 将结果设置到 result-area 中
          ra.innerHTML = day ;
          // 将 ra 从隐藏更改为显示
          ra.style.display = 'block' ;
        }
      };

      // 监听 button 上的鼠标左键单击(click)事件
      button.addEventListener("click", listener, false);
    </script>

    <ul>
        <li>
            document.querySelector( cssSelector )
            <ul>
                <li>根据参数指定的选择器选择匹配于该选择器的首个元素</li>
                <li>如果页面上没有与参数所指定选择器匹配的元素则返回 null</li>
            </ul>
        </li>
        <li>
            eventTarget.addEventListener( type , listener , capture )
            <ul>
                <li>作用: 为事件目标(eventTarget)绑定事件监听器</li>
                <li>参数 type 表示 事件类型，比如 click 表示鼠标左键单击事件</li>
                <li>参数 listener 表示 监听器 或 监听函数</li>
                <li>参数 capture 表示 是否在事件捕获阶段处理事件( false 表示不在捕获阶段处理 )</li>
            </ul>
        </li>
    </ul>
  </body>
</html>
